/**
 * Created by hejg on 2018/5/7.
 */
import React, {Component} from 'react';
import {
    ScrollView,
    View,
    StyleSheet,
    Text,
    TouchableOpacity,
} from 'react-native';
import CheckIcon from 'react-native-vector-icons/EvilIcons';
import CircleIcon from 'react-native-vector-icons/FontAwesome';
import Style from '../../../../components/Style';
import Tool from '../../../../components/Tool';
import Echarts from 'native-echarts';
import ChoseIcon from 'react-native-vector-icons/FontAwesome';
export default class Examination extends Component {
    constructor(props) {
        super(props);
        this._click =this._click.bind(this);
        this.state={
            selectArray:[],
            checkAll:false,
            listArray:[{id:1,name:'通信收入份额'},{id:2,name:'通信收入份额1'},{id:3,name:'通信收入份额3'},{id:4,name:'通信收入份额4'}]
        }
    }

    componentDidMount() {
        this._handleDataSelect();
    }
    _handleDataSelect(){
        let list = this.state.listArray
        for (let i=0;i<list.length;i++) {
            let item = list[i];
            item.select = false;

        }
        this.setState({
            listArray:list
        });
    }
    _CheckAll(flag){
        let list = this.state.listArray
        for (let i=0;i<list.length;i++) {
            list[i].select = (flag?false:true);
        }
        this.setState({
            listArray:list,
            checkAll:flag?false:true
        });
    }
    _click(index){
        let list = this.state.listArray
        list[index].select = (list[index].select ?false:true)
        this.setState({
            listArray:list,
        });
    }
    render() {
        return (
            <View style={{backgroundColor:Style.color.white}}>
                <View style={styles.timeView}>
                    <Text style={{color:Style.color.blue}}>请设置对比指标</Text>
                    <TouchableOpacity
                        onPress={()=>this._CheckAll(this.state.checkAll)}
                    ><Text>全选</Text></TouchableOpacity>
                </View>
                <ScrollView>
                    {
                        this.state.listArray.map((item,index)=>(
                            <ListItem key={`CityCheckItem_${index}`} index={index} click={this._click} select={item.select} name={item.name}/>
                        ))
                    }
                </ScrollView>
            </View>
        );
    }
}

class ListItem extends Component{
    render(){
        return(
            <TouchableOpacity
                onPress={()=>this.props.click(this.props.index)}
                style={{flexDirection:'row',marginBottom:15}}>
                {
                    this.props.select?
                        <CircleIcon name={'check-circle'} color={Style.color.blue} size={18} style={{paddingLeft:20,paddingRight:20}}/>
                        :
                        <CircleIcon name={'circle-thin'} size={18} style={{paddingLeft:20,paddingRight:20}}/>
                }
                <Text style={{color:Style.color.black,fontSize:Style.fontSize.normal}}>{this.props.name}</Text>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    timeView:{
        backgroundColor:Style.color.white,marginBottom:10,height:30,
        borderBottomWidth:1,borderBottomColor:Style.color.gray,borderStyle:'dotted',
        flexDirection:'row',justifyContent:'space-between',alignItems:'center',paddingRight:20,paddingLeft:20
    },
    radius:{
        width:5,height:5,borderRadius:50,backgroundColor:Style.color.lightRed,marginLeft:15,marginRight:15,
        alignSelf:'center'
    },
    listView:{flexDirection:'row',height:Style.css.titleHeight,backgroundColor:Style.color.white,paddingLeft:20,paddingRight:20,marginTop:5,},
    listNextView:{flexDirection:'row',height:Style.css.titleHeight,backgroundColor:'#d9d9d9',paddingLeft:20,paddingRight:20,marginTop:5,},
    kpiTitle:{color:Style.color.black,fontSize:Style.fontSize.normal},
})